<template>
	<view>
		<view style="position: relative;">
			<view>
				<view class="count">{{swiperIndex+1}}/{{goods_imageNum}}</view>
				<swiper class="swiper" circular :autoplay="swiperAutoPlayState" :interval="3000" :duration="500"
					@change="e => (swiperIndex = e.detail.current)">



					<swiper-item v-for="(item, index) in details.goodsImage" key="index">
						<img :src="details.goodsImage" alt="" />
						<!-- <VideoImg :url="item" :imgVideoStyle="imgVideoStyle" @fullscreenchangeHandler="fullscreenchangeHandler"
							@playSwiperVideoEmitHandler="swiperAutoPlayState = false"
							@pauseSwiperVideoEmitHandler="swiperAutoPlayState = true"
							@endedSwiperVideoEmitHandler="swiperAutoPlayState = true" /> -->
					</swiper-item>
				</swiper>
			</view>
		</view>


		<view class="swiperDotBox">
			<view v-for="(item, index) in details.goods_image" key="index" class="swiperDot"
				:class="swiperIndex === index && 'curDot'">
			</view>
		</view>
		<view class="cardList">
			<view style="width: 442rpx; margin: auto">
				<!-- <u-divider text="商品详情"></u-divider> -->
			</view>
			<view class="priceBox card">
				<view class="priceBox-price">
					<view style="font-size: 28rpx;font-weight: 700;">
						{{details.goodsName}}
					</view>
					<view style="font-size: 26rpx;">
						￥{{details.price}}
					</view>

					<view class="opction">
						<rich-text :nodes="details.detail_text" style="color: #3e3e3e;font-size: 22rpx;"></rich-text>
					</view>
					<template v-if="typeState === 3">
						<image class="tab" src="http://qiniu.suboshimuying.cn/static/details/Group.png" mode=""></image>
						<text style="color: rgba(0, 0, 0, 0.4); font-size: 22rpx">市场价值:¥{{ details.order_price }}</text>
					</template>
				</view>
				<template v-if="true">
					<view style="color: rgba(0, 0, 0, 0.4); font-size: 22rpx">
						<text v-if="details.mx_price">某多参考价:¥{{ details.mx_price }}</text>
						&nbsp;&nbsp;&nbsp;&nbsp;
						<text v-if="details.mb_price">某宝参考价:¥{{ details.mb_price }}</text>
					</view>
				</template>
			</view>

			<template v-if="true">
				<view class="areaBox card">
					<view>门店地址</view>
					<view class="areaBox-area">{{ details.adress_det }}</view>
				</view>
			</template>

			<template v-if="true">
				<view class="card">
					<view class="areaBox" style="margin-bottom: 15rpx">
						<view>上门服务</view>
						<view class="areaBox-area">{{ details.call_pel }}</view>
					</view>
					<view class="areaBox" style="padding-top: 15rpx; border-top: 1rpx solid #f4f4f4">
						<view>到店服务</view>
						<view class="areaBox-area">{{ details.adress_det }}</view>
					</view>
				</view>
			</template>

			<view class="card" v-if="true">
				<view class="areaBox" style="margin-bottom: 15rpx">
					<view>上门服务</view>
					<view class="areaBox-area">{{ details.call_pel }}</view>
				</view>
				<view class="areaBox" style="padding-top: 15rpx; border-top: 1rpx solid #f4f4f4">
					<view>到店服务</view>
					<view class="areaBox-area">{{ details.adress_det }}</view>
				</view>
			</view>

		</view>

		<!-- 底部按钮 -->
		<view class="fixedBox">
			<view class="fixedBox-left" @click="navigateTo" data-url="/pages/cart/cart">
				<image src="../../static/images/index/cart.png" mode=""></image>
				<view class="gwc-text">购物车</view>
			</view>
			<view class="fixedBox-right">
				<view class="fixedBox-right-left" @click="buyOrCart(0)">加入购物车</view>
				<view class="fixedBox-right-right" @click="buyOrCart(1)">立即购买</view>
			</view>
		</view>
		<!-- 下单弹出层 -->
		<PlacePopup :details="details" @popupBtnCallback="popupCallback2" :btnType="btnType"
			@popupClose="popupShow2 = false" :showFlag="popupShow2" :type="typeState" />

		<u-datetime-picker :show="showDueDateState" v-model="dueDateValue" mode="date" @cancel="showDueDateState = false"
			@confirm="confirmDueDateHandler"></u-datetime-picker>

		<!-- 规格选择 -->
		<view class="mask" v-show="specShow" @click="specsw"></view>
		<view class="spec-content" v-show="specShow">
			<view class="iconfont icon-guanbi spec-gb" @click="specsw"></view>

			<view class="spec-top">

				<image class="spec-img" :src="details.goodsImage" mode=""></image>

				<view class="spec-top-right">
					<view class="spec-top-name">
						{{details.goodsName}}
					</view>

					<view class="spec-top-right-2">
						<view class="spec-top-right-price">
							￥{{details.price}}
						</view>

						<view class="spec-top-right-kc">
							库存：{{details.stockquantity}}
						</view>
					</view>

				</view>

			</view>
			<view class="spec-item" v-for="(item,index) in specList" key="index">
				<view class="spec-item-title">
					{{item.name}}
				</view>

				<view class="spec-item-cellbox">
					<view @click="checkSpec" :data-idx="idx" :data-index="index"
						:class="item.checked == idx ? 'spec-item-cell-check' : 'spec-item-cell'" v-for="(items,idx) in item.data"
						key="index">
						{{items.attribute_value}}
					</view>
				</view>
			</view>
			<view class="amount">
				<view>数量</view>
				<view class="amount-right">
					<view class="amount-right-cell" @click="goodsNumChange('reduce')">
						-
					</view>
					<view class="amount-right-cell amount-right-input">
						<input type="number" :value="goodsNum" :data-num="goodsNum" @input="goodsNumHandle" />
					</view>
					<view class="amount-right-cell" @click="goodsNumChange('add')">
						+
					</view>
				</view>
			</view>
			<view class="spec-confirm-box">
				<button class="spec-confirm" @click="specHandle">{{isBuy?'立即支付':'加入购物车'}}</button>
			</view>
		</view>

	</view>
</template>

<script>
	import dayjs from 'dayjs'
	import PlacePopup from '@/components/PlacePopup/PlacePopup.vue'
	import VideoImg from '@/components/VideoImg/VideoImg.vue'
	import MessageBox from '@/components/MessageBox/MessageBox.vue'
	export default {
		data() {
			return {
				videoContext: '',
				radio: 0,
				typeState: 0, //专区状态
				id: null, //商品ID
				details: {}, //商品详情
				commentData: {}, //评论
				popupShow2: false,
				popupShow3: false,
				btnType: true,
				messGoods: [], //评论
				shareFlag: false,
				imgVideoStyle: 'detail',
				isHideTabbar: false, // tabbar 状态
				swiperAutoPlayState: true, // swiper 是否自动轮播
				swiperIndex: 0,
				dueDateValue: Number(new Date()),
				showDueDateState: false,
				dueData: '请点击这里选择预产期',
				goods_image: [],
				goods_imageNum: 0,
				specShow: false, //规格弹窗展示
				specList: [], //规格列表
				isBuy: true, //是否为购买状态
				goodsNum: 1, //商品数量
			}
		},
		components: {
			PlacePopup,
			VideoImg
		},
		onReady: function(res) {
			this.videoContext = uni.createVideoContext('myvideo', this)

		},

		async onLoad(option) {
			let res = await this.$api.getcategoods({})
			console.log(res);
			// 区分分享进入和正常进入
			if (option.fxuserId) {
				// 区分自己进入和别人进入
				this.shareFlag = true
				if (option.fxuserId != uni.getStorageSync('userId')) {
					// uni.setStorage()
					uni.setStorageSync('fxuserId', option.fxuserId)
					uni.setStorageSync('pid', option.fxuserId)
					if (!uni.getStorageSync('token')) uni.navigateTo({
						url: '/subPages/login/login'
					})
				}
			} else {
				this.shareFlag = false
			}
			// 一级分类id 1:热卖 2:本地服务 3:薅羊毛 4:镇店之宝
			this.typeState = Number(option.type)
			this.id = option.id
			console.log(option)
			this.getGoodDetails(option.id)

		},
		onShow() {
			//商品详情
			this.getMessGoods() //获取评论


		},
		// 分享好友
		onShareAppMessage(res) {
			return {
				//type 一级分类id 1:热卖 2:本地服务 3:薅羊毛 4:镇店之宝
				// id:商品ID
				title: '米夸商城', // 标题
				path: `/subPages/goodDetails/goodDetails?fxuserId=${uni.getStorageSync('userId')}&type=${this.details.one_category_id}&id=${this.details.id}`, // 分享路径
				imageUrl: this.details.thum_image, // 分享图
				desc: this.details.name
			}
		},
		// 分享朋友圈
		onShareTimeline() {
			return {
				title: '米夸商城', // 标题
				path: `/subPages/goodDetails/goodDetails?fxuserId=${uni.getStorageSync('userId')}&type=${this.details.one_category_id}&id=${this.details.id}`, // 分享路径
				imageUrl: this.details.thum_image // 分享图
			}
		},

		methods: {

			// 选择规格
			checkSpec(e) {
				let idx = e.currentTarget.dataset.idx;
				let index = e.currentTarget.dataset.index;
				let specList = this.specList;
				specList[index].checked = idx;
				this.specList = specList;

				let sku = [];
				for (let i = 0; i < specList.length; i++) {
					console.log(specList[i].data[specList[i].checked])
					sku.push(specList[i].data[specList[i].checked])
				}
				this.sku = sku;
				this.getStockquantity(this.id, sku);
			},

			// 增加减少数量
			goodsNumChange(type) {
				if (type == 'reduce') {
					this.goodsNum--
				} else {
					this.goodsNum++
				}
			},
			// 数量手动输入
			goodsNumHandle(e) {
				this.goodsNum = e.detail.value;
			},

			// 加入购物车或购买
			buyOrCart(type) {
				if (type == 1) {
					this.isBuy = true
				}
				if (type == 0) {
					this.isBuy = false
				}
				this.specShow = !this.specShow;
			},

			// 规格确认按钮
			specHandle() {
				if (this.isBuy) {
					wx.requestPayment({
						timeStamp: new Date().getTime(),
						nonceStr: '112233',
						package: 'prepay_id=xxx',
						signType: 'MD5',
						paySign: '454545',
						success(res) {},
						fail(res) {}
					})
				} else {
					this.addCart();
				}
			},

			// 弹出框开关
			specsw() {
				this.specShow = !this.specShow;
			},

			// 购买
			goBuy() {
				uni.navigateTo({
					url: 'subPages/order/order'
				})
			},

			navigateTo(e) {
				uni.navigateTo({
					url: e.currentTarget.dataset.url
				})
			},

			screenChange(e) {
				this.videoContext.requestFullScreen()
				let fullScreen = e.detail.fullScreen; // 值true为进入全屏，false为退出全屏
				console.log(e, "全屏");
			},
			changeSwiperHandler(e) {
				console.log(e, 'swiper')
			},
			fullscreenchangeHandler() {
				this.$nextTick(() => {
					this.isHideTabbar = !this.isHideTabbar
				})
			},
			// 跳转
			toUrl(url) {
				uni.navigateTo({
					url
				})
			},
			// 导航栏点击
			leftClick() {
				if (this.shareFlag) {
					uni.switchTab({
						url: '/pages/index/index'
					})
				} else {
					uni.navigateBack()
				}
			},
			// 立即购买-加入购物车 回调
			popupCallback2(number) {
				// number:数量
				console.log(number)
				if (this.btnType) {
					// 下单事件
					uni.navigateTo({
						url: `/subPages/order/order?flag=${true}&type=${this.typeState}&id=${this.id}&num=${number}`
					})
					this.popupShow2 = false;
				} else {
					// 加入购物车事件
					this.addCart(number)
				}
			},
			// 确认选择预产期
			confirmDueDateHandler(e) {
				this.dueData = dayjs(e.value).format('YYYY-MM-DD')
				this.showDueDateState = false
			},
			// 确认填报预产期
			async confirmFillOutHandler() {
				this.showDueDateState = false
				if (this.dueData === '请点击这里选择预产期') return uni.showToast({
					title: '请先选择预产时间',
					icon: 'none'
				})
				const targetDate = dayjs(this.dueData)
				const today = dayjs()
				const diffInDays = targetDate.diff(today, 'day')
				console.log(diffInDays) // 输出结果为数字，表示距离今天还有多少天
				if (diffInDays > 310) return uni.showToast({
					title: '不可选择大于十个月以上的时间哦~',
					icon: 'none'
				})
				try {
					await this.$api.expectDate({
						expect_time: this.dueData
					})
					this.popupShow3 = false
					this.popupShow2 = true
					uni.showToast({
						title: '录入成功~',
						icon: 'none'
					})
				} catch (error) {
					console.log(error, '录入预产期失败')
					this.popupShow3 = false
				}
			},
			// 加入购物车
			async addCart() {
				let res = await this.$api.addCart({
					goodsId: this.id,
					goodsNum: this.goodsNum,
					uid: wx.getStorageSync('userInfo').uid
				})
				this.$u.toast(res.message)
				if (res.code === 0) {
					setTimeout(() => {
						this.popupShow2 = false
					}, 1500)
				}
			},
			// 商品详情
			async getGoodDetails(id) {
				let res = await this.$api.getGoodDetails({
					id,
				})
				this.details = res.data;
				this.goods_imageNum = res.data.goods_image.length;
				let specList = JSON.parse(res.data.goods_attr);

				for (let i = 0; i < specList.length; i++) {
					specList[i].checked = 0;
				}
				this.specList = specList;
				let sku = [];
				for (let i = 0; i < specList.length; i++) {
					console.log(specList[i].data[0])
					sku.push(specList[i].data[0])
				}
				this.sku = sku;
				this.getStockquantity(id, sku);
			},
			// 获取评论
			async getMessGoods() {
				let res = await this.$api.getMessGoods({
					id: this.id,
					page: 1,
					total: 5
				})
				this.messGoods = res.data.data
			},

			// 获取库存信息
			async getStockquantity(id, sku) {
				let res = await this.$api.stockquantity({
					id: id,
					sku: sku
				})
				this.messGoods = res.data[0]
			}
		}
	}
</script>

<style>
	.tab {
		position: absolute;
		bottom: 80rpx;
		z-index: 3;
		left: 50%;
		transform: translateX(-50%);
	}

	.count {
		position: absolute;
		left: 20rpx;
		background-color: #3333333d;
		border-radius: 6rpx;
		top: 60rpx;
		font-size: 22rpx;
		line-height: 50rpx;
		color: #fff;
		padding: 0 15rpx;
		z-index: 4;
	}

	page {
		box-sizing: border-box;
		padding-bottom: 230rpx;
	}

	button {
		background-color: #fff;
	}

	button::after {
		border: none;
	}

	.button-hover {
		background: #fff;
	}
</style>

<style lang="scss" scoped>
	.cont {
		.box {
			border-radius: 10rpx;
			border: 2rpx solid #eee;
			margin-top: 40rpx;
			padding: 20rpx;


			.box-item {
				.right {
					margin-left: 40rpx;
					flex: 1
				}

				display: flex;

				line-height: 40rpx;

				.name {
					font-size: 24rpx;
					font-weight: 800;
				}

				.price {
					font-size: 24rpx;
				}

				.content {
					font-size: 24rpx;
				}
			}
		}

	}

	.opction {
		padding-left: 20rpx;

		.li {
			position: relative;
			font-size: 24rpx;
			color: #231b1bba;

			&:before {
				position: absolute;
				content: '';
				width: 10rpx;
				height: 10rpx;
				border-radius: 50%;
				background-color: #231b1b7a;
				left: 0;
				top: 50%;
				transform: translate(-210%, -50%);
			}
		}
	}

	.swiper-item {
		display: block;
		line-height: 300rpx;
		width: 100%;
		height: 100%;
		text-align: center;
	}

	.swiper {
		height: 750rpx;
	}

	.swiperDotBox {
		display: flex;
		align-items: center;
		justify-content: center;
		// margin-top: -30rpx;
		z-index: 10099 !important;

		.swiperDot {
			margin: 0 6rpx;
			z-index: 10099 !important;
			width: 36rpx;
			height: 10rpx;
			background-color: rgba(255, 255, 255, 0.5);
			border-radius: 10rpx;
		}
	}

	.curDot {
		background-color: #fff !important;
	}

	.cardList {
		box-sizing: border-box;
		padding: 0 24rpx;
	}

	.priceBox {
		&-price {
			// height: 64rpx;
			line-height: 64rpx;
			// color: $priceText;
			font-size: 52rpx;
			font-weight: 500;
			font-family: 'PingFang SC';

			.tab {
				vertical-align: middle;
				width: 106rpx;
				height: 36rpx;
				margin-left: 10rpx;
			}
		}

		&-title {
			color: rgba(0, 0, 0, 0.9);
			font-size: 30rpx;
			font-weight: 500;
			line-height: 44rpx;
			letter-spacing: 0.6rpx;
		}
	}

	.areaBox {
		display: flex;
		justify-content: space-between;
		align-items: center;
		// color: rgba(0, 0, 0, 0.7);
		color: #333;
		font-size: 26rpx;
		font-weight: 400;

		&-area {
			margin-left: 16rpx;
			flex: 1;
			color: #000;
		}
	}

	.commentCard {
		&-title {
			box-sizing: border-box;
			padding-bottom: 22rpx;
			border-bottom: 1rpx solid #f4f4f4;
			display: flex;
			justify-content: space-between;
			align-items: center;
			color: rgba(0, 0, 0, 0.8);
			font-size: 28rpx;
			font-weight: 500;
			text-align: left;

			.arrowright {
				margin-left: 10rpx;
				vertical-align: middle;
				width: 24rpx;
				height: 24rpx;
			}
		}

		&-center {
			margin-top: 12rpx;

			.user {
				display: flex;
				justify-content: space-between;
				align-items: center;
				color: rgba(0, 0, 0, 0.55);
				font-size: 26rpx;
				font-weight: 400;

				.picture {
					width: 80rpx;
					height: 80rpx;
					border-radius: 50%;
					margin-right: 16rpx;
				}

				.userRight {
					flex: 1;
				}
			}

			.comment {
				margin-top: 16rpx;
				// height: 80rpx;
			}
		}
	}

	.commentCard-below {
		margin-top: 16rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 210rpx;

		image {
			width: 210rpx;
			height: 210rpx;
			border-radius: 16rpx;
		}
	}

	// 底部按钮
	.fixedBox {
		position: fixed;
		bottom: 0;
		left: 0;
		width: 100%;
		box-shadow: 10px 50px 100px #150a0a;
		// height: 188rpx;
		background-color: #fff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		box-sizing: border-box;
		padding: 30rpx 32rpx 28rpx;

		&-left {
			margin-right: 24rpx;
			color: rgba(0, 0, 0, 0.8);
			font-size: 22rpx;
			font-weight: 400;
			text-align: center;
			margin-right: 30rpx;

			image {
				width: 48rpx;
				height: 48rpx;
				vertical-align: middle;
			}

			.gwc-text {
				font-size: 20rpx;
			}
		}

		&-right {
			flex: 1;
			height: 80rpx;
			line-height: 80rpx;
			color: #fff;
			border-radius: 600rpx;
			opacity: 1;
			background: rgb(0, 0, 0);
			text-align: center;
			display: flex;
			justify-content: space-around;

			&-left {
				width: 50%;
			}

			&-right {
				width: 50%;
				background-color: $uni-color-primary;
				border-radius: 50rpx;

			}
		}
	}

	.selectTimeBox {
		margin: 60rpx auto 10rpx;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 36rpx;
		font-weight: 700;
		color: rgb(249, 106, 106);
		border: 1rpx solid rgba(0, 0, 0, 0.2);
		padding: 20rpx;
	}

	.thum_image {
		width: 100%;
		margin-top: 12rpx;
	}

	.mask {
		width: 100vw;
		height: 100vh;
		position: absolute;
		top: 0;
		background-color: rgba(20, 20, 20, 0.3);
		z-index: 10100;
	}

	.spec-content {
		position: absolute;
		bottom: 0rpx;
		z-index: 10111;
		height: 60vh;
		background: white;
		width: 100%;
		border-top-left-radius: 30rpx;
		border-top-right-radius: 30rpx;

		.spec-gb {
			position: absolute;
			right: 30rpx;
			top: 20rpx;
			color: #666;
			font-size: 36rpx;
		}

		.spec-confirm-box {
			position: absolute;
			bottom: 0rpx;
			width: 100%;
			padding: 0 20rpx;
			height: 100rpx;


			.spec-confirm {
				margin: 0;
				border-radius: 50rpx;
				background-color: #333;
				height: 80rpx;
				line-height: 80rpx;
				width: calc(100% - 40rpx);
				color: white;
			}
		}
	}

	.spec-item-title {}

	.spec-item-cell {
		border: 1rpx solid #999;
		padding: 5rpx 10rpx;
		margin-right: 20rpx;
		border-radius: 5rpx;
	}

	.spec-item-cell-check {
		border: 1rpx solid #275ae3;
		background-color: #275ae3;
		color: white;
		padding: 5rpx 10rpx;
		margin-right: 20rpx;
		border-radius: 5rpx;
	}

	.spec-item {
		font-size: 24rpx;
		padding: 20rpx;

		.spec-item-title {
			line-height: 50rpx;
			font-size: 26rpx;
			font-weight: 700;
		}
	}

	.spec-item-cellbox {
		display: flex;
	}



	.spec-top {
		display: flex;
		margin-top: 50rpx;
		padding: 20rpx;
		font-size: 30rpx;

		.spec-img {
			width: 160rpx;
			height: 160rpx;
			border: 1rpx solid #ddd;
			border-radius: 10rpx;
		}
	}

	.spec-top-right {
		margin-left: 20rpx;

		.spec-top-right-2 {
			display: flex;
			margin-top: 10rpx;

			.spec-top-right-price {
				margin-right: 20rpx;
				font-weight: 700;
			}

			.spec-top-right-kc {
				font-size: 22rpx;
				margin-top: 8rpx;
				color: #666;
			}
		}
	}



	.spec-top-name {
		margin-top: 20rpx;
		line-height: 60rpx;
		font-weight: 700;
	}

	.amount {
		padding: 20rpx;
		display: flex;
		justify-content: space-between;
		font-size: 26rpx;

		.amount-right {
			display: flex;

			.amount-right-cell {
				width: 50rpx;
				height: 50rpx;
				line-height: 50rpx;
				text-align: center;
				background-color: #ddd;
				border-radius: 5rpx;
				color: #333;
			}

			.amount-right-input {
				margin: 0 5rpx;
				width: 100rpx;
				font-size: 24rpx;
			}
		}
	}
</style>